﻿<Infrastructure:VisualStateAwarePage x:Name="pageRoot"
                                     x:Class="AdventureWorks.Shopper.Views.CheckoutHubPage"
                                     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                                     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                                     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                                     xmlns:views="using:AdventureWorks.Shopper.Views"
                                     xmlns:designViewModels="using:AdventureWorks.Shopper.DesignViewModels"
                                     xmlns:Infrastructure="using:Microsoft.Practices.Prism.StoreApps"
                                     mc:Ignorable="d"
                                     x:Uid="Page"
                                     Infrastructure:ViewModelLocator.AutoWireViewModel="True"
                                     d:DataContext="{d:DesignInstance designViewModels:CheckoutHubPageDesignViewModel, IsDesignTimeCreatable=True}">

    <Page.TopAppBar>
        <AppBar Style="{StaticResource AppBarStyle}"
                x:Uid="TopAppBar">
            <views:TopAppBarUserControl />
        </AppBar>
    </Page.TopAppBar>

    <Grid Style="{StaticResource LayoutRootStyle}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!-- Back button and page title -->
        <Grid x:Name="grid1"
              Height="140">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton"
                    AutomationProperties.AutomationId="CheckoutHubPageBackButton"
                    Style="{StaticResource BackButtonStyle}"
                    Command="{Binding GoBackCommand, ElementName=pageRoot}" />
            <TextBlock x:Uid="CheckoutHubTitle"
                       x:Name="pageTitle"
                       Text="Enter Information"
                       Grid.Column="1"
                       Style="{StaticResource PageHeaderTextStyle}" />
        </Grid>

        <!-- Page content -->
        <ScrollViewer x:Name="scrollViewer"
                      Grid.Row="1"
                      HorizontalScrollBarVisibility="Auto"
                      VerticalScrollBarVisibility="Disabled"
                      ZoomMode="Disabled">
            <Grid x:Name="HubGrid"
                  Margin="120,0,0,50">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="600" />
                    <ColumnDefinition Width="80" />
                    <ColumnDefinition Width="600" />
                    <ColumnDefinition Width="80" />
                    <ColumnDefinition Width="600" />
                    <ColumnDefinition Width="20" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="0" />
                    <RowDefinition Height="0" />
                    <RowDefinition Height="0" />
                </Grid.RowDefinitions>

                <!-- Shipping Address -->
                <TextBlock x:Uid="ShippingAddressLabel"
                           x:Name="ShippingAddressLabel"
                           Text="Shipping Address"
                           Grid.Row="0"
                           Grid.Column="0"
                           Margin="5,0"
                           VerticalAlignment="Top"
                           TextTrimming="WordEllipsis"
                           Style="{StaticResource PageSubheaderTextStyle}"
                           Foreground="{StaticResource AWShopperAccentTextBrush}" />

                <views:ShippingAddressUserControl x:Name="ShippingAddressInfo"
                                                  Grid.Row="2"
                                                  MaxWidth="600"
                                                  HorizontalAlignment="Stretch"
                                                  Loaded="StartLayoutUpdates"
                                                  Unloaded="StopLayoutUpdates"
                                                  DataContext="{Binding ShippingAddressViewModel}" />

                <!-- Billing Address -->
                <TextBlock x:Name="BillingAddressLabel"
                           x:Uid="BillingAddressLabel"
                           Text="Billing Address"
                           Grid.Row="0"
                           Grid.Column="2"
                           Margin="5,0"
                           VerticalAlignment="Top"
                           TextTrimming="WordEllipsis"
                           Style="{StaticResource PageSubheaderTextStyle}"
                           Foreground="{StaticResource AWShopperAccentTextBrush}" />

                <CheckBox x:Name="SameAsShippingAddressCheckBox"
                          x:Uid="SameAsShippingAddressCheckBox"
                          AutomationProperties.AutomationId="SameAsShippingAddressCheckBox"
                          Grid.Row="1"
                          Grid.Column="2"
                          Margin="5,20,5,0"
                          VerticalAlignment="Top"
                          Content="Same as Shipping Address"
                          IsChecked="{Binding UseSameAddressAsShipping, Mode=TwoWay}" />

                <views:BillingAddressUserControl x:Name="BillingAddressInfo"
                                                 Grid.Row="2"
                                                 Grid.Column="2"
                                                 MaxWidth="600"
                                                 HorizontalAlignment="Stretch"
                                                 Loaded="StartLayoutUpdates"
                                                 Unloaded="StopLayoutUpdates"
                                                 DataContext="{Binding BillingAddressViewModel}"/>

                <!-- Payment Method & Submit -->
                <TextBlock x:Name="PaymentMethodLabel"
                           x:Uid="PaymentMethodLabel"
                           Text="Payment Method"
                           Grid.Row="0"
                           Grid.Column="4"
                           Margin="5,0"
                           VerticalAlignment="Top"
                           TextTrimming="WordEllipsis"
                           Style="{StaticResource PageSubheaderTextStyle}"
                           Foreground="{StaticResource AWShopperAccentTextBrush}" />

                <StackPanel x:Name="PaymentMethodAndSubmitPanel"
                            Orientation="Vertical"
                            Grid.Row="2"
                            Grid.Column="4">
                    <views:PaymentMethodUserControl x:Name="PaymentMethodInfo"
                                                    Loaded="StartLayoutUpdates"
                                                    Unloaded="StopLayoutUpdates"
                                                    DataContext="{Binding PaymentMethodViewModel}"
                                                    MaxWidth="600"
                                                    HorizontalAlignment="Stretch"/>
                    <Button x:Uid="SubmitButton"
                            x:Name="SubmitButton"
                            AutomationProperties.AutomationId="SubmitButton"
                            Command="{Binding GoNextCommand}"
                            Content="Submit"
                            Width="300"
                            Margin="5,50,5,20"
                            MaxWidth="600"
                            Background="{StaticResource AWShopperAccentBrush}" />
                    <TextBlock Text="Shipping address incomplete"
                               x:Uid="ShippingAddressIncompleteMessage"
                               Style="{StaticResource ErrorMessageStyle}"
                               Visibility="{Binding IsShippingAddressInvalid, Converter={StaticResource BooleanToVisibilityConverter}}" />
                    <TextBlock Text="Billing address incomplete"
                               x:Uid="BillingAddressIncompleteMessage"
                               Style="{StaticResource ErrorMessageStyle}"
                               Visibility="{Binding IsBillingAddressInvalid, Converter={StaticResource BooleanToVisibilityConverter}}" />
                    <TextBlock Text="Payment method incomplete"
                               x:Uid="PaymentMethodIncompleteMessage"
                               Style="{StaticResource ErrorMessageStyle}"
                               Visibility="{Binding IsPaymentMethodInvalid, Converter={StaticResource BooleanToVisibilityConverter}}" />
                </StackPanel>
            </Grid>
        </ScrollViewer>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="DefaultLayout" />

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="PortraitLayout">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource PortraitBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HubGrid"
                                                       Storyboard.TargetProperty="(Grid.RowDefinitions)[2].Height">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="*" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HubGrid"
                                                       Storyboard.TargetProperty="(Grid.RowDefinitions)[3].Height">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="*" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HubGrid"
                                                       Storyboard.TargetProperty="(Grid.RowDefinitions)[4].Height">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="*" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HubGrid"
                                                       Storyboard.TargetProperty="(Grid.RowDefinitions)[5].Height">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="*" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HubGrid"
                                                       Storyboard.TargetProperty="(Grid.ColumnDefinitions)[0].Width">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="*" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HubGrid"
                                                       Storyboard.TargetProperty="(Grid.ColumnDefinitions)[1].Width">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="0" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HubGrid"
                                                       Storyboard.TargetProperty="(Grid.ColumnDefinitions)[2].Width">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="0" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HubGrid"
                                                       Storyboard.TargetProperty="(Grid.ColumnDefinitions)[3].Width">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="0" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HubGrid"
                                                       Storyboard.TargetProperty="(Grid.ColumnDefinitions)[4].Width">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="0" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HubGrid"
                                                       Storyboard.TargetProperty="(Grid.ColumnDefinitions)[5].Width">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="0" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
                                                       Storyboard.TargetName="HubGrid">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>20,0,20,0</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="scrollViewer"
                                                       Storyboard.TargetProperty="HorizontalScrollBarVisibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Disabled" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="scrollViewer"
                                                       Storyboard.TargetProperty="VerticalScrollBarVisibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Auto" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BillingAddressLabel"
                                                       Storyboard.TargetProperty="(Grid.Row)">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="2" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BillingAddressLabel"
                                                       Storyboard.TargetProperty="(Grid.Column)">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="0" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BillingAddressInfo"
                                                       Storyboard.TargetProperty="(Grid.Row)">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="3" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BillingAddressInfo"
                                                       Storyboard.TargetProperty="(Grid.Column)">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="0" />
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaymentMethodLabel"
                                                       Storyboard.TargetProperty="(Grid.Row)">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="4" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaymentMethodLabel"
                                                       Storyboard.TargetProperty="(Grid.Column)">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="0" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaymentMethodInfo"
                                                       Storyboard.TargetProperty="(Grid.Row)">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="5" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaymentMethodInfo"
                                                       Storyboard.TargetProperty="(Grid.Column)">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="0" />
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)"
                                                       Storyboard.TargetName="ShippingAddressInfo">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>1</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)"
                                                       Storyboard.TargetName="PaymentMethodAndSubmitPanel">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>5</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)"
                                                       Storyboard.TargetName="PaymentMethodAndSubmitPanel">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>0</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)"
                                                       Storyboard.TargetName="SameAsShippingAddressCheckBox">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>0</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)"
                                                       Storyboard.TargetName="SameAsShippingAddressCheckBox">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>2</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.VerticalAlignment)"
                                                       Storyboard.TargetName="SameAsShippingAddressCheckBox">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <VerticalAlignment>Bottom</VerticalAlignment>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin"
                                                       Storyboard.TargetName="SameAsShippingAddressCheckBox">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="5,50,5,10" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)"
                                                       Storyboard.TargetName="SubmitButton">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <HorizontalAlignment>Stretch</HorizontalAlignment>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)"
                                                       Storyboard.TargetName="SubmitButton">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Double>NaN</x:Double>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
                                                       Storyboard.TargetName="SubmitButton">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:String>5,20,5,40</x:String>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!--
                    The back button and title have different styles when in minimal layout, and the list representation is substituted
                    for the grid displayed in all other view states
                -->
                <VisualState x:Name="MinimalLayout">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource MinimalBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource MinimalPageHeaderTextStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HubGrid"
                                                       Storyboard.TargetProperty="(Grid.RowDefinitions)[2].Height">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="*" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HubGrid"
                                                       Storyboard.TargetProperty="(Grid.RowDefinitions)[3].Height">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="*" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HubGrid"
                                                       Storyboard.TargetProperty="(Grid.RowDefinitions)[4].Height">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="*" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HubGrid"
                                                       Storyboard.TargetProperty="(Grid.RowDefinitions)[5].Height">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="*" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HubGrid"
                                                       Storyboard.TargetProperty="(Grid.ColumnDefinitions)[0].Width">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="*" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HubGrid"
                                                       Storyboard.TargetProperty="(Grid.ColumnDefinitions)[1].Width">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="0" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HubGrid"
                                                       Storyboard.TargetProperty="(Grid.ColumnDefinitions)[2].Width">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="0" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HubGrid"
                                                       Storyboard.TargetProperty="(Grid.ColumnDefinitions)[3].Width">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="0" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HubGrid"
                                                       Storyboard.TargetProperty="(Grid.ColumnDefinitions)[4].Width">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="0" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HubGrid"
                                                       Storyboard.TargetProperty="(Grid.ColumnDefinitions)[5].Width">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="0" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
                                                       Storyboard.TargetName="HubGrid">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>20,0,20,0</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="scrollViewer"
                                                       Storyboard.TargetProperty="HorizontalScrollBarVisibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Disabled" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="scrollViewer"
                                                       Storyboard.TargetProperty="VerticalScrollBarVisibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Auto" />
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BillingAddressLabel"
                                                       Storyboard.TargetProperty="(Grid.Row)">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="2" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BillingAddressLabel"
                                                       Storyboard.TargetProperty="(Grid.Column)">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="0" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BillingAddressInfo"
                                                       Storyboard.TargetProperty="(Grid.Row)">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="3" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BillingAddressInfo"
                                                       Storyboard.TargetProperty="(Grid.Column)">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="0" />
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaymentMethodLabel"
                                                       Storyboard.TargetProperty="(Grid.Row)">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="4" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaymentMethodLabel"
                                                       Storyboard.TargetProperty="(Grid.Column)">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="0" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaymentMethodInfo"
                                                       Storyboard.TargetProperty="(Grid.Row)">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="5" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaymentMethodInfo"
                                                       Storyboard.TargetProperty="(Grid.Column)">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="0" />
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)"
                                                       Storyboard.TargetName="ShippingAddressInfo">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>1</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)"
                                                       Storyboard.TargetName="PaymentMethodAndSubmitPanel">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>5</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)"
                                                       Storyboard.TargetName="PaymentMethodAndSubmitPanel">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>0</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)"
                                                       Storyboard.TargetName="SubmitButton">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Double>NaN</x:Double>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)"
                                                       Storyboard.TargetName="SubmitButton">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <HorizontalAlignment>Stretch</HorizontalAlignment>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)"
                                                       Storyboard.TargetName="SameAsShippingAddressCheckBox">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>0</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)"
                                                       Storyboard.TargetName="SameAsShippingAddressCheckBox">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>2</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.VerticalAlignment)"
                                                       Storyboard.TargetName="SameAsShippingAddressCheckBox">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <VerticalAlignment>Bottom</VerticalAlignment>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin"
                                                       Storyboard.TargetName="SameAsShippingAddressCheckBox">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="5,50,5,10" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
                                                       Storyboard.TargetName="SubmitButton">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:String>5,20,20,40</x:String>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Infrastructure:VisualStateAwarePage>